<template>
  <div>
    <div class="line-chart" ref="line"></div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([GridComponent, LineChart, CanvasRenderer]);
export default {
  props: {
    lineData: Array,
    color: {
      type: String,
      default: "#8BDE8A"
    }
  },
  mounted: function() {
    setTimeout(() => {
      let chart = echarts.init(this.$refs["line"]);
      chart.setOption({
        color: [this.color],
        xAxis: {
          type: "category",
          show: false
        },
        yAxis: {
          type: "value",
          show: false
        },
        series: [
          {
            symbol: "circle",
            symbolSize: 10,
            // lineStyle: {
            //   color: this.color
            // },

            data: this.lineData,
            type: "line",
            smooth: true
          }
        ]
      });
    }, 400);
  },
  components: {}
};
</script>
<style lang="scss">
.line-chart {
  width: 100%;
  height: 247px;
  background: #272939;
}
</style>
